<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./leader-line.min.js"></script>
    <style>
        .target {
            display: inline-block;
            background-color: #9ee7ea;
            padding: 12px;
        }
        .box{
            width: 200px;
            height: 200px;
        }
        #start {}

        #end {
            float: right;
            margin-top: 200px;
        }

    </style>
</head>
<body>
<div class="box">
    <div id="start" class="target" >start</div>
    <div id="end" class="target">end</div>
</div>

<script>
    // new LeaderLine(
    //     document.getElementById('start'),
    //     document.getElementById('end')
    // );

    var startEle = document.getElementById('start');
    var endEle = document.getElementById('end');
    //
    // var leader_line = new LeaderLine(
    //     startEle,
    //     endEle,
    //     {
    //         dash: true,
    //     }
    // );

    // var leader_line = new LeaderLine(
    //     startEle,
    //     endEle,
    //     {
    //         startPlugColor: '#ff3792', // 渐变色开始色
    //         endPlugColor: '#fff386',// 渐变色结束色
    //         gradient: true, // 使用渐变色
    //         dash: { // 虚线样式
    //             animation: true,// 让线条滚动起来
    //         }
    //     }
    // );

    var leader_line = new LeaderLine(
        startEle,
        endEle, {
            startPlugColor: '#ff3792', // 渐变色开始色#ff3792
            endPlugColor: '#fff386', // 渐变色结束色
            gradient: true, // 使用渐变色
            dash: { // 虚线样式
                animation: true, // 让线条滚动起来
            },
            hide: true,
            // color: 'green',
            size: 4,
            // startPlug: 'square', //手指
            // endPlug: 'hand' //手指
        },
    );
    /** 显示效果
     *  draw 从起点到终点绘制线条
     *  fade 淡入淡出
     *  none 无效果，即直接显示
     */
    var showEffectName = 'draw';
    // 动画参数
    var animOptions = {
        duration: 1000, //持续时长
        timing: 'ease-in', // 动画函数
    }
    leader_line.show(showEffectName, animOptions)
    //leader_line.hide(showEffectName,animOptions)
    scrollableBox.addEventListener('scroll', AnimEvent.add(function() {
        leader_line.position();
    }), false);
</script>
</body>
</html>